{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div>
            <input class="btn btn-primary" type="button" value="新建订单1(dom打开对话框)" data-toggle="modal"
                   data-target="#myModal">
            <input id="btn_add" class="btn btn-primary" type="button" value="新建订单2(js绑定对话框)">
        </div>
        <div class="bs-example" data-example-id="simple-table">
            <table class="table table-bordered">
                <caption><span class="glyphicon glyphicon-list" aria-hidden="true"></span> 订单列表</caption>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>订单号</th>
                    <th>商品名</th>
                    <th>订单价格</th>
                    <th>状态</th>
                    <th>下单人</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for item in data_set %}
                    <tr>
                        <th scope="row">{{ item.id }}</th>
                        <td>{{ item.oid }}</td>
                        <td>{{ item.title }}</td>
                        <td>{{ item.price }}</td>
                        <td>{{ item.get_status_display }}</td>
                        <td>{{ item.admin.username }}</td>
                        <td>
                            <input uid="{{ item.id }}" type="button" class="btn btn-success update_btn" value="编辑">
                            <input uid="{{ item.id }}" type="button" class="btn btn-danger del_btn" value="删除">
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div aria-label="..." class="clearfix">
            <ul class="pagination" style="float: left">
                {{ page_str }}
            </ul>
        </div>
    </div>

    <!-- 新建/编辑订单对话框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新建订单</h4>
                </div>
                <div class="modal-body">
                    <form id="form_add" >
                        <div class="clearfix">
                            {% for field in form %}
                                <div class="col-xs-6" style="“position: relative">
                                    <label for="inputEmail3" class="col-sm control-label"><span
                                            class="glyphicon glyphicon-ok"
                                            aria-hidden="true"></span> {{ field.label }}:</label>
                                    {{ field }}
                                    <span style="color: red;" id="err_id" class="error_msg"></span>
                                </div>
                            {% endfor %}

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="btn_save" type="button" class="btn btn-primary">提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

                </div>
            </div>
        </div>
    </div>
    <!-- 删除订单对话框 -->
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <h4>请确认是否删除</h4>
                <p style="margin:15px 0px"> 如若删除，此订单关联信息都将清除</p>
                <p style="margin:15px 0px;text-align: right">
                    <button nid="{{ item.id }}" id="del_sub" type="button" class="btn btn-danger">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </p>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script>
        $(function () {
            var delete_id;
            var update_id;
            bind_order();
            bind_save();
            bind_delete();
            sub_delete();
            bind_update();
        })

        function bind_order() {
            $("#btn_add").click(function () {
                update_id = undefined;
                $('#myModal').modal('show');
            });
        }

        function bind_save() {
            $('#btn_save').click(function () {
                $('.error_msg').empty();
                if (update_id) {
                    //如果有update_id则为更新
                    $.ajax({
                        url: "/order/update/" + update_id + '/',
                        type: "post",
                        dataType: "JSON",
                        data: $("#form_add").serialize(),
                        success: function (res) {
                            if (res.status) {
                                alert('修改成功');
                                //刷新列表
                                location.reload();
                            } else {
                                if (res.tips) {
                                    alert(res.tips);
                                    location.reload();
                                } else {
                                    //把错误信息显示对话框中
                                    $.each(res.error, function (name, data) {
                                        console.log(name, data);
                                        $('#id_' + name).next().text(data)
                                    })
                                }
                            }
                        }
                    })
                } else {
                    //没有则添加
                    $.ajax({
                        url: "/order/add/",
                        type: "post",
                        dataType: "JSON",
                        data: $("#form_add").serialize(),
                        success: function (res) {
                            console.log(res);
                            if (res.status) {
                                alert('保存成功');
                                //清空表单$("#form_add")是jquery对象，$("#form_add")[0]是DOM对象
                                $("#form_add")[0].reset();
                                // 关闭对话框
                                $('#myModal').modal('hide');
                                //刷新页面
                                location.reload();
                            } else {
                                //把错误信息显示对话框中
                                $.each(res.error, function (name, data) {
                                    $('#id_' + name).next().text(data)
                                })

                            }
                        }
                    })
                }
            })
        }

        function bind_delete() {
            $(".del_btn").click(function () {
                //绑定删除键展示对话框
                $('#delModal').modal('show');
                //获取当前删除按钮对应行的数据id,再传给全局变量，用于下面的ajax请求
                var uid = $(this).attr('uid');
                delete_id = uid;
            });
        }

        function sub_delete() {
            $('#del_sub').click(function () {
                //delete_nid = $(this).uid
                $.ajax({
                    url: '/order/delete/',
                    type: 'get',
                    dataType: "JSON",
                    data: {
                        nid: delete_id
                    },
                    success: function (res) {
                        if (res.status) {
                            alert('删除成功');
                            // 关闭标签
                            $('#delModal').modal('hide');
                            //刷新列表
                            location.reload();
                        } else {
                            alert(res.error);
                            // 关闭标签
                            $('#delModal').modal('hide');
                        }
                    }
                })
            })
        }

        function bind_update() {
            $('.update_btn').click(function () {
                //获取编辑行的nid
                var uid = $(this).attr('uid');
                //将id传给全局变量update_id
                update_id = uid;
                //用ajax请求去后端请求这行的原数据
                $.ajax({
                    url: '/order/data/',
                    type: 'get',
                    dataType: 'JSON',
                    data: {
                        uid: uid
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            //将对话框标题改为编辑
                            $("#myModalLabel").text('编辑');
                            //显示对话框，使用和新建同一个对话框
                            $('#myModal').modal('show');
                            $.each(res.data, function (name, value) {
                                $("#id_" + name).val(value)
                            })
                        } else {
                            alert(res.error);
                            location.reload();
                        }
                    }
                })
            });
        }


    </script>
{% endblock %}